<template>
  <el-card>
    <h2 style="margin-bottom: 24px;">会员数据总览</h2>
    <el-row :gutter="24">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">会员总数</div>
          <div class="stat-value">12,345</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">本月新增</div>
          <div class="stat-value">456</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">活跃会员</div>
          <div class="stat-value">3,210</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">流失会员</div>
          <div class="stat-value">98</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="12">
        <el-card>
          <div class="chart-title">会员等级分布</div>
          <div id="level-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="chart-title">会员标签分布</div>
          <div id="tag-chart" style="height:300px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 32px;">
      <el-col :span="24">
        <el-card>
          <div class="chart-title">会员地域分布</div>
          <div id="region-chart" style="height:360px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  // 会员等级分布
  const levelChart = echarts.init(document.getElementById('level-chart')!)
  levelChart.setOption({
    tooltip: {},
    legend: { data: ['人数'] },
    xAxis: { data: ['L1', 'L2', 'L3', 'L4', 'L5', 'L6', 'L7'] },
    yAxis: {},
    series: [{ name: '人数', type: 'bar', data: [3200, 2100, 1800, 1500, 900, 600, 300], itemStyle: { color: '#409EFF' } }]
  })
  // 会员标签分布
  const tagChart = echarts.init(document.getElementById('tag-chart')!)
  tagChart.setOption({
    tooltip: { trigger: 'item' },
    legend: { top: '5%', left: 'center' },
    series: [{
      name: '标签分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 8, borderColor: '#fff', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
      labelLine: { show: false },
      data: [
        { value: 3000, name: '高价值' },
        { value: 2500, name: '活跃' },
        { value: 1800, name: '新用户' },
        { value: 1200, name: '老客户' },
        { value: 900, name: '药妆达人' }
      ]
    }]
  })
  // 会员地域分布
  const regionChart = echarts.init(document.getElementById('region-chart')!)
  regionChart.setOption({
    tooltip: {},
    xAxis: { type: 'category', data: ['中国', '日本', '美国', '韩国', '新加坡'] },
    yAxis: { type: 'value' },
    series: [{ name: '会员数', type: 'bar', data: [5000, 3200, 1800, 900, 400], itemStyle: { color: '#67C23A' } }]
  })
})
</script>

<style scoped>
.stat-card {
  text-align: center;
  padding: 18px 0;
}
.stat-title {
  font-size: 15px;
  color: #888;
  margin-bottom: 8px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: var(--theme-color);
}
.chart-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
</style> 